<template>
    <div class='suggest'>
            <div class="nav">
                <van-icon name="arrow-left" size="25" @click="logout"/>
                <input
                type="text"
                placeholder="大家都在搜 许嵩"
                v-model="value"
                @input="searchEvent"
                />
                <van-icon name="cross" size="25"/>
            </div>
            <ul class="searchlist" v-show="search1">
                    <li v-for="(item,i) in searchList" :key="i" @click="seadetail(item.name)">
                        <van-icon name="search" size="20" color="#ACACAC"/>
                        <span>{{item.name}}</span>
                    </li>
            </ul>
            <ul class="suggestList" v-show="search2">
                <span>单曲</span>
                        <div
                            v-for="(item,i) in suggestList"
                            :key="item.id"
                            class="songs"
                            @click="gosongDetail(item.id,i)"
                        >
                            <div class="detail">
                            <p class="name">{{ item.name }}</p>
                            <p class="singer">
                                <span v-for="item2 in item.artists" :key="item2.id"
                                >{{ item2.name }} </span
                                >-
                                <span>{{ item.album.name }}</span>
                            </p>
                            </div>
                            <div class="play">
                            <van-icon name="play-circle-o" color="gray" size="20" />
                            <van-icon name="more-o" color="gray" size="20" />
                            </div>
                        </div>
            </ul>
            
    <!-- <div class="content" v-if="show">
      <p v-for="item in suggestList" :key="item.id" @click="sug(item.name)">
        {{ item.name }}
      </p>
    </div> -->
    </div>
</template>

<script>
import axios from 'axios';
export default {   
    data() {      
        return {
            value:'',
            searchList:[],
            suggestList:[],
            len:false,
            timer: null,
            search1:true,
            search2:false,
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        // 返回上一级
        logout(){
            this.$router.go(-1)
        },
        // 获取路由的keyword
        getSongs(){
            this.value = this.$route.query.keyword;
            console.log(this.value);
        },
        // 点击开始进行歌曲详细搜索
        seadetail(name){
            this.search1 = false;
            this.value = name;
            axios
            .get(`http://localhost:3000/search?keywords=${name}`)
            .then((res) => {
                this.search2 = true;
                console.log(res);
                this.suggestList = res.data.result.songs;
                document.querySelector('.searchlist').style.height = '1200px';
            })
        },
        // 跳转播放歌曲
        gosongDetail(id,i){
            this.$router.push(`/songdetail/${id}`);
            document.querySelectorAll(".suggestList .songs")[i].style.background = "#e9e9e9"
        },
        searchEvent() {
            this.clearTimer()
            if (this.value && this.value.length > 0) {
                this.len = true
                this.timer = setTimeout(() => {
                    console.log(this.value)
                    //此处为接口函数
                  axios
                  .get(`http://localhost:3000/search?keywords=${this.value}`)
                  .then((res) => {
                    this.searchList = res.data.result.songs.splice(1,10);
                    console.log("搜索结果", this.searchList);
                  });
                }, 500)
            } else {
                if (this.keyword === '') {
                    this.len = false
                    return
                }
            }
        },
          clearTimer() {
              if (this.timer) {
                  clearTimeout(this.timer)
              }
        },
        search(){
            axios
                  .get(`http://localhost:3000/search?keywords=${this.value}`)
                  .then((res) => {
                    this.searchList = res.data.result.songs.splice(1,10);
                    console.log("搜索结果", this.searchList);
                  });
        },
    },
    created() {
        this.getSongs();
        this.search();
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
body{
    background: #F5F5F5;
}
.suggest{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    background: rgb(221, 221, 221);
    z-index: 999;
}
.nav input {
  width: 82%;
  height: 32px;
  line-height: 32px;
  padding: 2px 5px;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgb(197, 197, 197);
}
.searchlist{
    display: block;
    width: 100%;
    height: 410px;
    margin-top: 35px;
    /* background: orange; */
}
.searchlist li{
    display: block;
    line-height: 40px;
    height: 40px;
    padding-left: 10px;
    vertical-align: middle;
}
.searchlist li span{
    display: inline-block;
    width: 90%;
    border-bottom: 1px solid #f5f5f5;
    margin-left: 5px;
}
.suggestList{
    display: block;
    width: 90%;
    /* height: 1000px; */
    background: #FFFFFF;
    margin: 0 auto;
    margin-top: 50px;
    border-radius: 13px;
}
.suggestList >span{
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #E6E6E6;
    display: block;
    width: 90%;
    margin: 0 auto;
}
.songs {
  display: flex;
  width: 90%;
  padding: 15px 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E6E6E6;
  margin: 0 auto;
}
.detail {
  width: 80%;
}
.detail .name {
  font-size: 15px;
  font-weight: 550;
  margin-bottom: 5px;
  color: rgb(48, 47, 47);
}
.detail .singer {
  font-size: 13px;
  color: rgb(83, 83, 83);
}
.detail .singer span:first-child {
  color: rgb(89, 89, 201);
}
.play {
  width: 20%;
  text-align: center;
}
.play .van-icon:last-child {
  margin-left: 5px;
}
</style>